<template>
	<view class="wordbreak">
		<view class="header">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<!-- <view :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar backgroundColor="transparent" left-icon="left" @clickLeft="goback" />
			</view> -->
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px', width: '100%' }">
				<uni-nav-bar backgroundColor="transparent" title="0" left-icon="left" @clickLeft="goback" />
			</view>
			<view class="schcool-title">
				<view class="line-green"></view>
				<view class="schcool">{{ userInfo.deptName }}</view>
				<view class="line-green"></view>
			</view>
		</view>
		<view class="content">
			<view class="introduce">
				<view class="introduce-content">每人每天有10次机会，每次有60秒的选择,点击开始挑战参与活动吧</view>
				<view class="participate" @click="startGame">开始挑战</view>
				<view class="time">活动时间：2024/04/01 - 2024/04/30</view>
			</view>
			<view class="reward">
				<view class="reward-title">活动奖励</view>
				<view class="reward-content">
					<view class="gift-item" v-for="(item, index) in giftData">
						<image
							class="gift-img"
							:src="`https://www.aikoolearn.com/video-dev${item.avatar}`"
							mode=""
							style="width: 88rpx; height: 88rpx; background: #ffffff; border-radius: 8rpx"
						></image>
						<view class="gift-right">
							<view class="gift-name">
								{{ item.name }}
							</view>
							<view class="gift-desc">
								{{ item.description }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getLevel, getremain } from '@/services/level.js';
import { getPrize } from '@/services/wordbreak.js';
export default {
	data() {
		return {
			globalData: null,
			levelData: [],
			giftData: [],
			remain: 0
		};
	},
	onShow() {
		this.getremainData();
		// this.getlevelData(4);
		this.getPrizeData();
		this.globalData = wx.getStorageSync('globalData');
	},
	computed: {
		userInfo() {
			return wx.getStorageSync('userInfo');
		}
	},
	methods: {
		async getlevelData(id) {
			const res = await getLevel(id);
			if (res.code == 200) {
				this.levelData = res.rows;
			}
		},
		goback() {
			wx.navigateBack();
		},
		async getPrizeData() {
			const res = await getPrize();
			if (res.code == 200) {
				this.giftData = res.rows;
			}
		},
		async getremainData() {
			const res = await getremain();
			if (res.code == 200) {
				this.remain = res.data;
			}
		},

		startGame() {
			if (this.remain > 0) {
				uni.navigateTo({
					url: '/pages/ingame/index?type=1'
				});
			} else {
				wx.showToast({
					title: '今日次数已用尽，明日再来吧！',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.wordbreak {
	padding-bottom: 70rpx;
	background: linear-gradient(180deg, #82e0d3 0%, #fbe099 100%);
	position: relative;
	.header {
		width: 100%;
		height: 480rpx;
		background-image: url('https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/word-bgi.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			/* margin-top: 64rpx; */
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
		.schcool-title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 440rpx;
			width: 100%;
			margin: 0 auto;
		}
	}

	.schcool {
		margin: 0 15rpx;
		color: #0fb09b;
	}
	.line-green {
		width: 50rpx;
		height: 3.817rpx;
		background-color: #0fb09b;
	}
	.content {
		.introduce {
			width: 662rpx;
			height: 456rpx;
			margin: 40rpx auto;
			background-size: 100% 100%;
			overflow: hidden;
			padding: 0 40rpx;
			box-sizing: border-box;
			background-repeat: no-repeat;
			background-image: url();
			.participate {
				width: 582rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
				background: #fe8926;
				margin-top: 80rpx;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(254, 137, 38, 0.4);
				border-radius: 46rpx;
			}
			.introduce-content {
				color: #808080;
				margin-top: 110rpx;
			}

			.time {
				color: #b3b3b3;
				font-size: 24rpx;
				width: 582rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
			}
		}

		.reward {
			width: 662rpx;
			background-color: #fff;
			border-radius: 32rpx;
			padding: 40rpx;
			margin: 0 auto;
			box-sizing: border-box;
			.reward-title {
			}
		}
	}

	.gift-img {
		border-radius: 50%;
		margin-left: 20rpx;
	}
	.gift-right {
		margin-left: 24rpx;
	}
	.gift-item {
		width: 582rpx;
		height: 136rpx;
		background: #fff2e7;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		.gift-name {
			color: #ff7603;
			font-size: 28rpx;
		}
		.gift-desc {
			color: #b3b3b3;
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
	.reward-content {
		margin-top: 8rpx;

		overflow-y: scroll;
	}
	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
		.uni-navbar__header-container-inner {
			display: none;
		}
	}
}
</style>
